<!--http://t-busi.xueerqin.net/index.html#/studentAppraise/index-->
<template>
    <div class="studentAppraise">
        <headNav 
            :title="'综合评价'">
        </headNav>
        <tabNav 
            :timerName="picker.name"
            :sortName="sortName"
            @openClassModal="openClassModal"
            @openTime="openPicker"
            @openSort="openSort">
        </tabNav>
        <userList 
            ref="list"
            @openEvaluateModal="openEvaluateModal">
        </userList>
        <classModal
            ref="classModal"
            @handelSelect="handelSelect">
        </classModal>
        <evaluateModal
            ref="evaluateModal"
            @handelRefreshList="handelRefreshList"
            @openTextModal="openTextModal">
        </evaluateModal>
        <textModal 
            ref="textModal">
        </textModal>
        <!--时间类型选择-->
        <Popup v-model="picker.show" position="bottom">
            <Picker
                title="时间"
                show-toolbar
                :columns="picker.list"
                @confirm="handelPicker"
                @cancel="picker.show = false"
            />
        </Popup>
        <!--排序选择-->
        <Popup v-model="sortShow" position="bottom">
            <Picker
                title="排序"
                show-toolbar
                :columns="sortList"
                @confirm="handelSort"
                @cancel="sortShow = false"
            />
        </Popup>
    </div>
</template>

<script>
import headNav from '@/components/headNav/headNav'
import tabNav from './components/tabNav'
import userList from './components/userList'
import classModal from './components/classModal'
import evaluateModal from './../components/evaluateModal'
import textModal from './../components/textModal'
import { Popup,Picker } from 'vant';
import { setTimeout } from 'timers';
export default {
    name:'studentAppraiseIndex',
    components:{
        headNav,
        tabNav,
        userList,
        classModal,
        evaluateModal,
        textModal,
        Popup,
        Picker
    },
    data(){
        return {
            picker:{
                show:false,
                name:'时间',
                list:['自定义','学期', '学年']
            },
            sortName:'排序',
            sortList:['首字母','总分','表扬','批评'],
            sortShow:false,
            routeSign:true  //路由标记
        }
    },
    computed:{
        classItem(){
            return this.$store.state.studentAppraise.classItem
        },
        classList () {
            return this.$store.state.user.classList
        }
    },
     watch: {
        $route: {
            handler: function(newVal, oldVal){
                if (newVal.path == "/studentAppraise/index" && oldVal.path == "/menu/index") {
                    this.routeSign = true;
                    setTimeout(()=>{
                        this.$refs.evaluateModal.show = false;
                    },100)
                }else{
                    this.routeSign = false;
                }
            },
            deep: true
        }
    },
    methods:{
        //打开文字点评
        openTextModal(){
            this.$refs.textModal.show = true;
        },
        //刷新学生列表
        handelRefreshList(){
            this.$refs.list.onLoad();
        },
        //学生评价
        openEvaluateModal(){
            this.$refs.evaluateModal.show = true;
            this.$refs.evaluateModal.handelInitialize();
            this.$refs.evaluateModal.getStudentsReviewType();
        },
        //打开时间选项
        openPicker(){
            this.picker.show = true;
        },
        //时间选项
        handelPicker(value, index){
            this.picker.name = value;
            this.picker.show = false;
            this.$store.commit('studentAppraise/setTimerType',index)
            if(index == 0){
                this.$store.commit('studentAppraise/setCurrentPage',0)
                this.$router.push('/studentAppraise/timeSelect'); 
            }else{
                this.$refs.list.onLoad();
            }
        },
        //打开排序选项
        openSort(){
            this.sortShow = true;
        },
        //排序选项
        handelSort(value, index){
            this.sortName = value;
            this.sortShow = false;
            this.$store.commit('studentAppraise/setScoreOrderType',index+1);
            this.$refs.list.onLoad();
        },
        //班级列表
        openClassModal(){
            this.$store.dispatch('studentAppraise/GetTeacherGradeClases').then(res=>{
                if(res.status == 200){
                    let arr = []
                    for (let i of res.data) {
                      for (let j of i.classes) {
                        arr.push(j)
                      }
                    }
                    arr.forEach(item=>{
                        item.classId = item.id;
                        item.className= item.name;
                    })
                    this.$store.state.studentAppraise.classList = arr;
                    this.$refs.classModal.show = true;
                }
            });
        },
        //班级选择
        handelSelect(item){
            this.$store.commit('studentAppraise/setClassItem',item)
            this.$refs.classModal.show = false;
            this.$refs.list.onLoad();
        },
        handelInit(){
            let classItem = {}
            for (var cls of this.classList) {
                if (cls.ClassId == this.$store.state.user.classId) {
                    classItem = {
                        gradeId: cls.GradeId,
                        gradeName:cls.GradeName,
                        classId: cls.ClassId,
                        className:cls.ClassName
                    }
                }
            }
            this.$store.commit('studentAppraise/setClassItem',classItem);
            this.$refs.list.onLoad();
        },
        handelInit2(){
            let classItem = {
                gradeId: this.classItem.gradeId,
                gradeName:this.classItem.gradeName,
                classId:this.classItem.classId,
                className:this.classItem.className
            }
            this.$store.commit('studentAppraise/setClassItem',classItem);
            this.$refs.list.onLoad();
        }
    },
    activated(){
        if(this.routeSign){
            this.handelInit()
        }else{
            this.handelInit2()
        }
    }
}
</script>

<style lang="less">
.studentAppraise{  
    height:100vh;
    position: relative; 
    background-color:#fff;
}
</style>






